<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HeaderTodo @addEvent="addEvent"></HeaderTodo>
    <!-- 主体部分 -->
    <BodyTodo :list="renderList" @changeStatus="changeStatus" @delSub="delSub"></BodyTodo>
    <!-- 底部部分 -->
    <FooterTodo
      :sum="sum"
      @delAll="delAll"
      :showClearAll="showClearAll"
      :type="type"
      @changeType="changeType"
    ></FooterTodo>
  </section>
</template>

<script>
import HeaderTodo from './components/HeaderTodo.vue'
import BodyTodo from './components/BodyTodo.vue'
import FooterTodo from './components/FooterTodo.vue'
export default {
  // 注册组件使用
  components: {
    HeaderTodo,
    BodyTodo,
    FooterTodo
  },

  // 自定义数据
  data() {
    return {
      // 表单本地存储控制数据
      list: JSON.parse(localStorage.getItem('list')) || [
        { flag: true, id: 1, value: '读万卷书' },
        { flag: false, id: 2, value: '行万里路' }
      ],
      type: 'all'
    }
  },

  // 函数方法部分
  methods: {
    // 改变选中状态
    changeStatus(id, flag) {
      this.list.forEach(item => {
        if (item.id === id) {
          item.flag = flag
        }
      })
    },

    // 回车弹起添加事件
    addEvent(value) {
      this.list = [...this.list, { flag: false, id: +new Date(), value: value }]
    },

    // 点击删除事件
    delSub(id) {
      this.list = this.list.filter(item => item.id !== id)
    },

    // 删除选中所有的事件
    delAll() {
      this.list = this.list.filter(item => !item.flag)
    },

    // 切换type
    changeType(type) {
      this.type = type
    }
  },
  computed: {
    // 计算剩余任务数
    sum() {
      return this.list.filter(item => !item.flag).length
    },

    // 清除已完成的数量
    showClearAll() {
      return this.list.some(item => item.flag)
    },

    // 重新渲染list
    renderList() {
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter(item => !item.flag)
        case 'completed':
          return this.list.filter(item => item.flag)
        default:
          return this.list
      }
    }
  },

  watch: {
    list: {
      immediate: true,
      deep: true,
      // 本地存储控制数据
      handler(newvar) {
        localStorage.setItem('list', JSON.stringify(newvar))
      }
    }
  }
}
</script>

<style></style>
